import React, { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { useSelector, useDispatch } from 'react-redux'
import './index.scss'

const ListData: any[] = [
  {
    pagePath: '/pages/classMgt/index',
    selectedIconPath: '../static/img/user/icon_a.png',
    iconPath: '../static/img/user/icon_n.png',
    text: '班级总览'
  },
  {
    pagePath: '/pages/classMgt/infoCheck/index',
    selectedIconPath: '../static/img/user/icon2_a.png',
    iconPath: '../static/img/user/icon2_n.png',
    text: '信息核对'
  },
  {
    pagePath: '/pages/schoolMgt/index',
    selectedIconPath: '../static/img/user/icon_a.png',
    iconPath: '../static/img/user/icon_n.png',
    text: '本校总览'
  },
  {
    pagePath: '/pages/personalizedAdvice/index',
    selectedIconPath: '../static/img/user/icon1_a.png',
    iconPath: '../static/img/user/icon1_n.png',
    text: '个性化建议'
  },
  {
    pagePath: '/pages/schoolMgt/infoMgt/index',
    selectedIconPath: '../static/img/user/icon2_a.png',
    iconPath: '../static/img/user/icon2_n.png',
    text: '信息管理'
  }
]

const color = '#666666'
const selectedColor = '#3E73FE'

const CustomTabBar: React.FC = () => {
  const dispatch = useDispatch()
  const [tabList, setTablList] = useState<any[]>([])
  const config = useSelector((state: any) => state.config)

  const handleClickTab = (index: number, url: string) => {
    dispatch({
      type: 'SET',
      data: index
    })
    Taro.switchTab({ url })
  }

  useEffect(() => {
    const userInfo: API.LoginRes = Taro.getStorageSync('USERINFO')
    // const classRes: API.ClassAdminItem = Taro.getStorageSync("CLASSRES");
    if (userInfo.userRoleCode == 2) {
      // 班级
      setTablList([ListData[0], ListData[1]])
    } else if (userInfo.userRoleCode == 3) {
      // 学校
      setTablList([ListData[2], ListData[3], ListData[4]])
    }
  }, [])

  return config.show ? (
    <View className='tab-bar'>
      {/* <View className="tab-bar-border"></View> */}
      {tabList.map((item, index) => {
        return (
          <View
            key={index}
            className='tab-bar-item'
            onClick={handleClickTab.bind(this, index, item.pagePath)}
          >
            <Image
              src={
                config.selected === index
                  ? item.selectedIconPath
                  : item.iconPath
              }
            />
            <View
              style={{
                color: config.selected === index ? selectedColor : color
              }}
            >
              {item.text}
            </View>
          </View>
        )
      })}
    </View>
  ) : null
}

export default CustomTabBar
